<template>
  <div>
    <h4>发表评论</h4>
    <hr />
    <textarea placeholder="请输入内容，最多120字" maxlength="120" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postMsg">发表评论</mt-button>

    <div class="cmt-list">
      <div class="cmt-item" v-for="(item,i) in cmtlist" :key="i">
        <div class="cmt-item-title">
          {{i+1}}楼 用户：{{item.user_name}} 发表时间：{{item.add_time|dateFormat}}
        </div>
        <div class="cmt-item-body">{{item.content}}</div>
      </div>
    </div>

    <mt-button type="primary" size="large" plain @click="loadMore">加载更多</mt-button>
  </div>
</template>

<script>
//从MintUI中按需导出弹框组件
import {Toast} from "mint-ui";

export default {
  data() {
    return {
      page: 1,
      cmtlist: [],
      msg:""
    };
  },
  props: ["newsid"], //接收父组件传递的新闻id
  methods: {
    async getCommentsByPage() {
      //根据页数获取评论数据
      const { data } = await this.$http.get(
        "/api/getcomments/" + this.newsid + "?pageindex=" + this.page
      );
      if (data.status == 0) {
        this.cmtlist =this.cmtlist.concat(data.message);
      }
    },
    loadMore(){
      this.page++;
      this.getCommentsByPage();
    },
    async postMsg(){
      if(this.msg.length<=0){
        return Toast("请输入评论内容！");
      }
      else{
       const {data} = await this.$http.post("/api/postcomment/" + this.newsid ,{content:this.msg});
       if(data.status==0){
         this.cmtlist.unshift({
           user_name:"匿名用户",
           add_time:new Date(),
           content:this.msg
         });
         this.msg="";
         Toast("评论成功！");
       }
      }
    }
  },
  created() {
    this.getCommentsByPage();
  },
};
</script>

<style lang="scss" scoped>
textarea {
  font-size: 14px;
  margin: 0;
}
.cmt-list {
  margin-top: 4px;
  .cmt-item {
    line-height: 30px;
    .cmt-item-title {
      font-size: 14px;
      background-color: #ddd;
    }
    .cmt-item-body {
      font-size: 13px;
      text-indent: 2em;
    }
  }
}
</style>